<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		/*select*/
		#select{width:200px;height:35px;}
		.sele_box{width:200px;height:150px;}
		.sele_box div{width:200px;height:150px;}
		.sele_box .sele_box1{background:#f29c9f;}
		.sele_box .sele_box2{background:#ccc;display: none;}
		.sele_box .sele_box3{background:#7f807f;display: none;}
	</style>
</head>
<body>
	<div class="select" onchange="selectBox()"><p>根据下拉选择，更换表单内容：</p>
		<select name="" id="select">
			<option value="">下拉一</option>
			<option value="">下拉二</option>
			<option value="">下拉三</option>
		</select>
		<div class="sele_box">
			<div class="sele_box1">模块一</div>
			<div class="sele_box2">模块二</div>
			<div class="sele_box3">模块三</div>
		</div>
	</div>
</body>
<script src="http://www.bhu.ac.cn/js/jquery.1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">

		// select
	function selectBox(){
		var index_ = $("#select option:selected").index();
		$(".sele_box div").eq(index_).show().siblings('div').hide();
	}

</script>
</html>